<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="topNav">
      <div class="floatRight">
        <div class="topTitle">登录</div>
        <div class="topTitle">注册</div>
        <div class="topTitle">我的订单</div>
        <div class="topTitle">帮助中心</div>
        <div class="topTitle">在线客服</div>
        <div class="topTitle">手机版</div>
      </div>
    </div>
    <div class="middleNav">
      <img
        src="C:\Users\Administrator\Desktop\temp\风景.jpeg"
        class="floatLeft"
      />
      <div class="middle">
        <div>首页</div>
        <div>图书库</div>
        <div>教学资料库</div>
        <div>关于我们</div>
      </div>
      <div class="floatRight search">
        <div><input placeholder="请输入关键字" /><button>搜索</button></div>
      </div>
    </div>
    <div class="middleSite">
      <div class="leftNav floatLeft">
        <div class="leftTitle">前端开发</div>
        <div class="leftTitle">后端开发</div>
        <div class="leftTitle">计算机</div>
        <div class="leftTitle">兴趣技能</div>
        <div class="leftTitle">考研</div>
        <div class="leftTitle">艺术</div>
        <div class="leftTitle">更多方向</div>
      </div>
      <div class="banner floatRight">
        <img src="C:\Users\Administrator\Desktop\temp\风景.jpeg" />
        <img src="C:\Users\Administrator\Desktop\temp\风景2.jpg" />
        <img src="C:\Users\Administrator\Desktop\temp\1.jpg" />
        <button style="left: 5px" id="leftBtn">&lt;</button>
        <button style="right: 5px" id="rightBtn">&gt;</button>
      </div>
    </div>
  </body>
  <script>
    var index = 1; //代表哪张图片显示
    var max = 3; //现在有3张图片
    var firstImgDom = document.querySelector(".banner img");
    firstImgDom.style.display = "block"; //让第一张图片显示出来
    var buttonDomLeft = document.querySelector("#leftBtn");
    var buttonDomRight = document.querySelector("#rightBtn");

    buttonDomLeft.onclick = function () {
      //获取上一个元素的dom
      var nextIndex = ((index - 2 + max) % max) + 1; //上一个图片的序号
      var nextImgDom = document.querySelector(
        ".banner img:nth-child(" + nextIndex + ")"
      );//第nextIndex的dom元素，即将显示的图片的dom
      console.log(nextImgDom);
      nextImgDom.style.display = 'block';
      var nowImgDom = document.querySelector(
        ".banner img:nth-child(" + index + ")"
      );//第Index的dom元素，现在显示的图片的dom
      nowImgDom.style.display = 'none';
      index  = nextIndex;
    };
  </script>
  <style>
    @import url("topNav.css");
    @import url("common.css");
    @import url("middleNav.css");
    @import url("middleSite.css");
    * {
      box-sizing: border-box;
    }
  </style>
</html>
